import useClickOutside from "../hooks/useClickOutside";
import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
import usePosition from "../hooks/usePosition";
import Arrow from "./Arrow";
import Offset from "./Offset";
import Position from "./Position";
import { FC, RefObject, useRef } from "react";

interface PopoverBodyProps {
  closeOnClickOutside: boolean;
  offset: Offset;
  position: Position;
  targetRef: RefObject<HTMLElement>;
  onClose(): void;
}

const PopoverBody: FC<PopoverBodyProps> = ({
  children,
  closeOnClickOutside,
  offset,
  position,
  targetRef,
  onClose,
}) => {
  const contentRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLDivElement>(null);
  const anchorRef = useRef<HTMLDivElement>(null);

  useClickOutside(closeOnClickOutside, contentRef, onClose);
  usePosition(contentRef, targetRef, anchorRef, position, offset);

  useIsomorphicLayoutEffect(() => {
    const innerContentEle = innerRef.current;
    if (!innerContentEle) {
      return;
    }

    // Limit the height of popover content
    const maxHeight = document.body.clientHeight * 0.75;
    if (innerContentEle.getBoundingClientRect().height >= maxHeight) {
      innerContentEle.style.overflow = "auto";
      innerContentEle.style.maxHeight = `${maxHeight}px`;
    }
  }, []);

  return (
    <>
      <div ref={anchorRef} style={{ left: 0, position: "absolute", top: 0 }} />
      <div className="rpv-core__popover-body" ref={contentRef}>
        <Arrow
          customClassName="rpv-core__popover-body-arrow"
          position={position}
        />
        <div ref={innerRef}>{children}</div>
      </div>
    </>
  );
};

export default PopoverBody;
